<template>
  <div class="footer-wrapper">
    <div class="copy-right-wrapper">
      <img class="logo" :src="logoUrl" :alt="$store.getters.imgAlt + 'footerLogo'" />
      <div class="copy-right">
        <span>{{ webSiteName }} {{ copyrightYear }} 版权所有</span>
        <span class="split">|</span>
        <span
          ><a
            class="link"
            style="color: white"
            href="http://beian.miit.gov.cn/"
            target="_blank"
            >{{ licenseNo }}</a
          >&nbsp;</span
        >
        <p class="tip-website">
          为获得最佳浏览体验，建议使用IE11、FireFox50.5、Chrome51.0及以上版本的浏览器
        </p>
      </div>
    </div>
    <div class="join-us">
      <div class="desc">欢迎加入来电</div>
      <ul class="join-list">
        <!-- <li class="join-item" v-for="(item, index) in joinList" :key="index">
          <el-popover placement="top" trigger="hover">
            <img
              class="img"
              :src="item.img"
              :alt="`${$store.getters.imgAlt} ${item.title}`"
              style="width: 130px"
            />
            <i slot="reference" :class="`iconfont ${item.logo} ${item.class}`"></i>
          </el-popover>
        </li> -->
      </ul>
    </div>
  </div>
</template>

<script>
import { getParamsDetail } from "_r/home.js";

export default {
  name: "Footer",
  data() {
    return {
      logoUrl: require("_a/images/common/logo_footer.png"),
      webSiteName: "网站名称XXX",
      licenseNo: "备案号XXX",
      joinList: [
        {
          class: "qq",
          logo: "icon-qq",
          img: require("_a/images/footer/QQImg.png"),
          title: "QQ群",
        },
        {
          class: "wechat",
          logo: "icon-weixin-copy",
          img: require("_a/images/footer/wechatImg.png"),
          title: "微信公众号",
        },
        {
          class: "gitee",
          logo: "icon-mayun",
          img: require("_a/images/footer/giteeImg.png"),
          title: "码云 开源社区",
        },
      ],
    };
  },
  computed: {
    copyrightYear() {
      return new Date().getFullYear();
    },
  },
  created() {
    this.getParamsDetailData();
  },
  methods: {
    /**
     * 获取系统参数信息
     */
    getParamsDetailData() {
      getParamsDetail({ groupName: "copyright" }).then((res) => {
        if (res.success) {
          this.licenseNo = res.data.licenseKey || "备案号XXX";
          this.webSiteName = res.data.domainChineseName || "网站名称XXX";
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';

.footer-wrapper {
  margin-top: 20px;
  display: flex;

  .copy-right-wrapper {
    width: 65%;
    color: $BorderLight;
    background: linear-gradient(to right, $Primary, #66b1ff);
    padding: 16px 0 16px 5vw;
    font-size: 14px;
    color: $BorderLight;
    display: flex;
    align-items: center;

    .logo {
      width: 240px;
      display: block;
      @media screen and (max-width: 920px) {
        width: 160px;
      }
    }

    .split {
      margin: 0 8px;
    }

    .link {
      &:hover {
        text-decoration: underline;
      }
    }

    .tip-website {
      padding-top: 8px;
    }
  }

  .join-us {
    background: linear-gradient(to right, $Placeholder, $Info);
    width: 35%;
    padding: 16px 5vw 16px 40px;
    color: #fff;

    .join-list {
      margin-top: 16px;
      display: flex;
      list-style: none;

      .join-item {
        .iconfont {
          margin-right: 16px;
          font-size: 30px;
          cursor: pointer;
        }

        .qq {
          &:hover {
            color: $Primary;
          }
        }

        .wechat {
          &:hover {
            color: $Success;
          }
        }

        .gitee {
          &:hover {
            color: #c71d24;
          }
        }
      }
    }
  }
}
</style>
